import React, {useState, useRef, useEffect} from 'react';
import moment from 'moment'
import { history } from 'umi'
import { List,Icon } from 'antd-mobile'
import {getAnswerRecord} from '@/services/edu'
import { storage,LOCALSTATE } from '@/utils';
import { toChinesNum } from '@/utils/utils'
import style from './index.less'



function History() {
  const { query = {} } = history.location as any;
  const { id,chapterId,sectionId } = query;
  const local = storage.get(LOCALSTATE,true)
  const [list,setList] = useState([]);

  
  const getData = async () => {
    
    const payload = {
      pageIndex:1,
      pageSize:20
    };
    const subjectId =local.currentSubjectId
    const param =chapterId?{chapterId}:{sectionId}
    const res = await getAnswerRecord({...payload,...param,subjectId})
    if (res.code === 1){
      setList(res.response?.list||[])
    }

    
  };
  useEffect(()=>{
    getData()
  },[])
  const renderCorrect =(data)=>{
    const {
      questionCorrect,
      questionCount

    } =data
    // Math.round((1/3) * 10000) / 100
    return Math.floor(questionCorrect/questionCount*10000)/100+'%'
  }
 
  return (
    <div>
      <div className={style.history}>
        <List>
          {
            list.map((item,i)=>(item.recordOrder>0?<List.Item onClick={()=>history.push(`/history/chapter?id=${item.id}`)} extra={<div className={style.status}><span>正确率 {item.correctPercent||'-'}% </span><span>{item.status===1?'已完成':`${item.recordOrder}/${item.recordSum}`}</span></div>} arrow="horizontal">
              <span>第{toChinesNum(item.chapterOrder)}章 {item.sectionOrder?`(${toChinesNum(item.sectionOrder)}节)`:''} </span>
              {/* <span>{moment().format('YYYY-MM-DD')}</span> */}
            </List.Item>:<></>))
          }
        </List>
      </div>
    </div>
  );
}

export default History;
